<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div
        style="
          width: 70px;
          height: 70px;
          border-radius: 4px;
          background: #00cc00;
          text-align: center;
          line-height: 70px;
          color: white;
        "
      >
        站点列表
      </div>
      <div class="q-ml-md">
        <div>站点</div>
        <div class="row">
          <q-select
            dense
            square
            outlined
            v-model="type"
            class="q-mt-sm"
            style="width: 250px"
            :options="option"
          >
          </q-select>
          <q-select
            dense
            square
            outlined
            v-model="type2"
            class="q-mt-sm q-ml-xs"
            style="width: 250px"
            :options="option"
          >
          </q-select>
        </div>
      </div>
    </div>
    <div style="width: 95%;padding-left:30px" class="row items-centers">
      <div class="row items-center" style="flex: 1">
        <div class="row" style="width: 33%">
          <img
            style="width: 100px; height: 100px"
            :src="require('src/assets/newIcon/1.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">月发电量（KWh）</div>
            <div>56564.1</div>
            <div style="color: #f29700; font-size: 14px">￥34533.4</div>
          </div>
        </div>
        <div class="row" style="width: 33%">
          <img
            style="width: 100px; height: 100px"
            :src="require('src/assets/newIcon/2.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">当前功率（KW）</div>
            <div>945.11</div>
          </div>
        </div>
        <div class="row q-mt-lg" style="width: 33%">
          <img
            style="width: 100px; height: 100px"
            :src="require('src/assets/newIcon/3.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">总发电量（KWh）</div>
            <div>256564.1</div>
            <div style="color: #f29700; font-size: 14px">￥134533.4</div>
          </div>
        </div>
      </div>
      <div
        class="row justify-center items-center"
        style="
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: #00b050;
          box-shadow: 1px 1px 10px #00b050, -1px -1px 10px #00b050;
        "
      >
        <div
          style="
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: #00b050;
            position: relative;
          "
        >
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
              font-size: 18px;
              font-weight: bold;
            "
          >
            <div class="text-center">今日发电量</div>
            <div class="text-center">5324.5</div>
            <div class="text-center">KWh</div>
          </div>
        </div>
      </div>
    </div>
    <div class="greenLine"></div>
    <div style="position:relative">
      <div
        id="lineChart"
        class="test-wrepper"
        :style="[{ width: '100%' }, { height: 500 + 'px' }]"
      ></div>
      <div class="row items-center" style="position:absolute;top: 10px;right: 30px;">
        <q-btn label="年" color="grey" size="md" />
        <q-btn label="月" color="grey" size="md" class="q-ml-xs q-mr-xs" />
        <q-btn label="日" color="primary" size="md" />
        <q-select
          dense
          square
          v-model="type3"
          class="q-ml-md"
          bg-color="primary"
          color="white"
          style="max-width: 230px;padding-left: 5px;"
          :options="option"
        >
        </q-select>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import resize from "src/components/mixins/resize.js";

let chart = null;
export default defineComponent({
  mixins: [resize],
  name: "ceshi1",
  components: {},
  data() {
    return {
      defaultOption: null,
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: '2023-05',
      option: [2019, 2021, 2022, 2023],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    // 初始化echarts实例
    initEcharts(chart) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      chart = echarts.init(document.getElementById("lineChart"));
      chart.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart.setOption(this.handlerDefaultOption(), true);
      this.chart = chart;
    },
    // 处理echarts配置项
    handlerDefaultOption() {
      this.defaultOption = {
        title: {
          text: "电量统计",
          left: "50%",
          textStyle: {
            color: "#898989",
            fontSize: 18,
          },
        },
        tooltip: {},
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6"],
        },
        yAxis: {
          name: "发电量（KWh）",
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle: {
              color: "#53D42C",
            },
          },
        ],
      };

      return this.defaultOption;
    },
  },
});
</script>

<style lang="scss" scoped></style>
